import { defineComponent, ref, reactive } from 'vue'
import { ElCard, ElLink, ElSpace, ElButton, ElRow, ElCol, ElTabs, ElTabPane } from 'element-plus'
import type { OptionsPropsType } from './typings'
import SaasTitle from '~/components/SaasTitle'
import AliIcon from '~/components/AliIocn'
import styles from '../../index.module.scss'
import MapView from '../../components/map'

export default defineComponent({
  name: 'AlarmView',
  props: ['record', 'cancel'],
  setup(props: OptionsPropsType) {
    const activeTabKey = ref<string>('1')
    const marker = reactive<any>({
      lng: '',
      lat: ''
    })
    return () => {
      const { record } = props
      marker.lng = record?.lon
      marker.lat = record?.lat
      return (
        <ElCard class={styles['info-card']}>
          <div>
            <SaasTitle type="primary">
              <ElLink underline={false} class={styles['police-edit-title']}>
                警报详情
              </ElLink>
            </SaasTitle>
            <ElSpace class={styles['info-tab-option-btns']}>
              <ElButton text type="primary" onClick={() => props.cancel()}>
                返回上一级&nbsp;
                <AliIcon type="icon-fanhuishangyiji" />
              </ElButton>
            </ElSpace>
          </div>
          <div style="margin: 16px 0;border-top: 1px solid #ECECEC;"></div>
          <ElRow>
            <ElCol span={5}>警报名称：{record?.alarmName}</ElCol>
            <ElCol span={5}>设备名称：{record?.deviceName}</ElCol>
            <ElCol span={5}>设备型号：{record?.modelName}</ElCol>
            <ElCol span={5}>所属工区：{record?.workAreaName}</ElCol>
          </ElRow>
          <div style="height: 10px;"></div>
          <ElRow>
            <ElCol span={5}>设备地址：{record?.alarmAddress}</ElCol>
            <ElCol span={5}>警报状态：{record?.alarmState === 1 ? '报警' : '恢复'}</ElCol>
            <ElCol span={5}>警报时间：{record?.reportTime}</ElCol>
            <ElCol span={5}>恢复时间：{record?.recoverTime}</ElCol>
          </ElRow>
          <div style="height: 20px;"></div>
          <ElTabs v-model={activeTabKey.value}>
            <ElTabPane key="1" name="1" label="警报地址" />
          </ElTabs>
          {/* 报警地址 */}
          {activeTabKey.value === '1' && (
            <MapView style="height: 600px;" marker={marker} id="policeInfo" />
          )}
        </ElCard>
      )
    }
  }
})
